<template>
	<div>
		<!-- 炉次跟踪 -->
		<pol-title title="铸坯实绩"></pol-title>
		<div class="padding-lr border-solid bg-tm radius-sm main-box-height">
			<!-- 搜索框 -->
			<pol-search :form="searchForm" :schema="schema" @search="clickSearch" class="margin-top">
				<template #CardTypeCode>
					<div class="el-input-num cursor" style="position: relative;" @click="selectJJQ">
						<el-input v-model="searchForm.CardTypeCode" placeholder="请选择结晶器浇次" size="large" readonly :suffix-icon="searchForm.CardTypeCode ? '' : 'ArrowDown'" />
						<span @click.stop="searchForm.CardTypeCode = ''" class="close-ico cursor" v-if="searchForm.CardTypeCode">
							<el-icon color="#fff"><Close /></el-icon>
						</span>
					</div>
				</template>
			</pol-search>

			<div class="flex align-start">
				<!-- 炉次列表 -->
				<div class="funrn-content-left hidden bg-blue-furn">
					<furnaceList></furnaceList>
				</div>

				<!-- 右边内容 -->
				<div class="hidden flex-sub funrn-content-right search-dark text-white padding-lr padding-top">
					<lay-json-schema-form :model="formData2" :schema="schema2" size="sm"></lay-json-schema-form>

					<!-- 导航 -->
					<div class="flex" style="clear: both;">
						<div class="luci-box cursor" :class="item.type === luciType ? 'nav-active-bg' : 'nav-df-bg'" v-for="(item, index) in lucTypeList" :key="index" @click="luciClick(item)">
							{{item.name}}
						</div>
					</div>

					<!-- 计划数据 -->
					<planData v-if="luciType === 'planData'"></planData>

					<!-- 生产实绩 -->
					<productionPerformance v-if="luciType === 'productionPerformance'"></productionPerformance>

					<!-- 过程数据 -->
					<processData v-if="luciType === 'processData'"></processData>

					<!-- 铸坯实绩 -->
					<billet v-if="luciType === 'billet'"></billet>

					<!-- 化验数据 -->
					<laboratoryData v-if="luciType === 'laboratoryData'"></laboratoryData>

					<!-- 其他工位数据 -->
					<otherData v-if="luciType === 'otherData'"></otherData>

					<!-- 其他信息 -->
					<otherinfo v-if="luciType === 'otherinfo'"></otherinfo>

					<!-- 实绩发送 -->
					<send v-if="luciType === 'send'"></send>
				</div>
			</div>
		</div>
		
		<crystallizerPopup ref="crystallizerPopupRef" @rowClick="rowClick"></crystallizerPopup>
	</div>
</template>

<script setup>
	import furnaceList from './components/FP-furnaceList.vue' //炉次列表
	import planData from './components/FP-planData.vue' //计划数据
	import productionPerformance from './components/FP-productionPerformance.vue' //生产实绩
	import processData from './components/FP-processData.vue' //过程数据
	import billet from './components/FP-billet.vue' //铸坯实绩
	import laboratoryData from './components/FP-laboratoryData.vue' //化验数据
	import otherData from './components/FP-otherData.vue' //其他工位数据
	import otherinfo from './components/FP-otherinfo.vue' //其他信息
	import send from './components/FP-send.vue' //实绩发送
	
	import crystallizerPopup from './components/crystallizerPopup.vue' //选择结晶器
	import { ref } from 'vue';

	// 炉次配置
	const lucTypeList = ref([{
			name: '计划数据',
			type: 'planData'
		}, {
			name: '生产实绩',
			type: 'productionPerformance'
		},
		{
			name: '过程数据',
			type: 'processData'
		},
		{
			name: '铸坯实绩',
			type: 'billet'
		},
		{
			name: '检化验数据',
			type: 'laboratoryData'
		},
		{
			name: '其他工位数据',
			type: 'otherData'
		},
		{
			name: '其他信息',
			type: 'otherinfo'
		},
		{
			name: '实绩发送',
			type: 'send'
		}
	])
	const luciType = ref('planData') //炉次类型，plan计划信息、ejection 出坯信息
	function luciClick(item) {
		luciType.value = item.type
	}


	//搜素数据
	const searchForm = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
		CardTypeCode2: '',
	});

	//搜素配置
	const schema = ref({
		CardTypeCode: {
			label: '结晶器浇次',
			slots: {
				customRender: 'CardTypeCode',
			},
			colProps: {
				md: 5,
			},
		},
		CardTypeCode2: {
			label: '炉号',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '输入炉号',
			},
			colProps: {
				md: 5,
			},
		},
		CardTypeName: {
			label: '关键字',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '选择输入关键字搜索',
			},
			colProps: {
				md: 8,
			},
		}
	});

	function clickSearch() {

	}

	//表单数据
	const formData2 = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
	});

	//表单配置
	const schema2 = ref({
		CardTypeCode: {
			label: '二级炉次',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},
		CardTypeName: {
			label: '状态',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},
		CardTypeName3: {
			label: '中包浇次',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},
		CardTypeName4: {
			label: '浇次内序号',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},
		CardTypeName5: {
			label: '制作命令号',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},

		adTypeCode: {
			label: '熔炼号',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},
		adTypeName: {
			label: '钢种',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},
		adTypeName3: {
			label: '钢包ID号',
			type: 'input',
			props: {
				type: 'text',
				placeholder: '',
			},
			colProps: {
				md: 6,
			},
		},
	});

	//选择结晶器
	const crystallizerPopupRef = ref(null)
	const selectJJQ = () => {
		crystallizerPopupRef.value.dialogOpen()
	}
	
	const rowClick = (row) =>{
		searchForm.value.CardTypeCode = row.ItemCode
	}
</script>

<style lang="scss" scoped>
	.funrn-content-left {
		flex-basis: 34%;
		height: calc(100vh - 280px);
	}

	.funrn-content-right {
		height: calc(100vh - 280px);
		overflow-y: auto;
	}

	.luci-box {
		padding: 12px 20px;
	}

	.nav-df-bg {
		background: #153C83;
	}

	.nav-active-bg {
		background: linear-gradient(180deg, #173494 0%, #328FD4 100%);
	}
	
	.close-ico{
		position: absolute;
		right: 16px;
		top: 15px;
		z-index: 2;
	}
</style>